<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="description" content="微分销系统" />
		<meta name="keywords" content="微分销系统" />
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="css/common.css" />
		<link rel="stylesheet" type="text/css" href="css/shopcar.css">
		<script type="text/javascript" src="js/auto-size.js"></script>
		<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	</head>

	<body class="bg_fa">
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">购物车</h1>
		</header>
		<nav class="mui-bar mui-bar-tab bg_ff">
			<a class="mui-tab-item1 " href="index.html">
				<span class="mui-icon "><img src="img/huihomePage.png"/></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item1" href="vip.html">
				<span class="mui-icon "><img src="img/huihomePage.png"/></span>
				<span class="mui-tab-label">会员中心</span>
			</a>
			<a class="mui-tab-item1 mui-active" href="cart.html">
				<span class="mui-icon "><img src="img/ShoppingCart.png"/></span>
				<span class="mui-tab-label">购物车</span>
			</a>
			<a class="mui-tab-item1" href="my.html">
				<span class="mui-icon "><img src="img/huiMycenter.png"/></span>
				<span class="mui-tab-label">我的</span>
			</a>
		</nav>
		<div class="mui-content bg_fa padding_b60">
			<div class="lb">
				<div class="">
					<div class="check">
						<div class="xz" data="0"></div>
					</div>
					<img src="img/img_pic3.png" class="spt">
					<div class="mid">
						<div class="clearfix">
							<p class="name mui-ellipsis left width90">韩国正品自然乐园芦荟补水保湿洗面奶男士女控油祛</p>
							<a href="javascript:void(0);" class="right width10 mg_top10 del"><img class="dell-cart" width="14" height="14" src="img/icon_delete.png" class="del"></a>
						</div>
						<p class="color">
							<span class="mg_r20">颜色: xx</span>
							<span>尺寸: xx</span>
						</p>
						<div class="jgq clearfix mg_top10">
							<p class="red left">￥<span class="pri">10.00</span></p>
							<div class="jj right">
								<span class="jia">-</span>
								<input class="num" value="1">
								<span class="jian">+</span>
							</div>
						</div>
					</div>
				</div>
				<div class="padding_10 color_99 font_13">
					运费: ￥10.00
				</div>
			</div>
			<div class="lb">
				<div class="">
					<div class="check">
						<div class="xz" data="0"></div>
					</div>
					<img src="img/img_pic3.png" class="spt">
					<div class="mid">
						<div class="clearfix">
							<p class="name mui-ellipsis left width90">韩国正品自然乐园芦荟补水保湿洗面奶男士女控油祛</p>
							<a href="javascript:void(0);" class="right width10 mg_top10 del"><img class="dell-cart" width="14" height="14" src="img/icon_delete.png" class="del"></a>
						</div>
						<p class="color">
							<span class="mg_r20">颜色: xx</span>
							<span>尺寸: xx</span>
						</p>
						<div class="jgq clearfix mg_top10">
							<p class="red left">￥<span class="pri">10.00</span></p>
							<div class="jj right">
								<span class="jia">-</span>
								<input class="num" value="1">
								<span class="jian">+</span>
							</div>
						</div>
					</div>
				</div>
				<div class="padding_10 color_99 font_13">
					运费: ￥10.00
				</div>
			</div>
			<div class="lb">
				<div class="">
					<div class="check">
						<div class="xz" data="0"></div>
					</div>
					<img src="img/img_pic3.png" class="spt">
					<div class="mid">
						<div class="clearfix">
							<p class="name mui-ellipsis left width90">韩国正品自然乐园芦荟补水保湿洗面奶男士女控油祛</p>
							<a href="javascript:void(0);" class="right width10 mg_top10 del"><img class="dell-cart" width="14" height="14" src="img/icon_delete.png" class="del"></a>
						</div>
						<p class="color">
							<span class="mg_r20">颜色: xx</span>
							<span>尺寸: xx</span>
						</p>
						<div class="jgq clearfix mg_top10">
							<p class="red left">￥<span class="pri">10.00</span></p>
							<div class="jj right">
								<span class="jia">-</span>
								<input class="num" value="1">
								<span class="jian">+</span>
							</div>
						</div>
					</div>
				</div>
				<div class="padding_10 color_99 font_13">
					运费: ￥10.00
				</div>
			</div>
			
		</div>
		<div class="fix_bottom">
			<div id="qx" data="0"></div><span style="float:left;line-height:0.8rem;">全选</span>
			<div class="zjq">
				<p class="p1 padding_tb10">合计:￥
					<span id="zj">0</span>
				</p>
				<!--<p>含运费</p>-->
			</div>
			<a id="js" href="cart-order.html">结算(<span id="zsl">0</span>)</a>
		</div>
		<script type="text/javascript">
			$(function() {
				js();
				$(".xz").click(function() {
					var a = $(this).attr("data");
					if(a == 0) {
						$(this).css("background-image", "url(img/check.png)");
						$(this).attr("data", 1)
					} else {
						$(this).css("background-image", "url(img/check_on.png)");
						$(this).attr("data", 0)
						$("#qx").attr("data", 0);
						$("#qx").css("background-image", "url(img/check_on.png)");
					}
					js();

				})
				$("#qx").click(function() {

					var a = $(this).attr("data");
					if(a == 0) {
						$(".xz").attr("data", 1);
						$(this).css("background-image", "url(img/check.png)");
						$(".xz").css("background-image", "url(img/check.png)");
						$(this).attr("data", 1);
					} else {
						$(".xz").attr("data", 0);
						$(this).css("background-image", "url(img/check_on.png)");
						$(".xz").css("background-image", "url(img/check_on.png)");
						$(this).attr("data", 0);
					}
					js();
				})
				$(".jian").click(function() {
					var a = $(this).prev().val();
					a++;
					$(this).prev().val(a);
					js();

				})
				$(".jia").click(function() {
					var a = $(this).next().val();
					a--;
					if(a < 1) {
						a = 1
					}
					$(this).next().val(a);
					var a = $(".xz").attr("data");
					if(a == 1) {
						js();
					}
				})
				$(".del").click(function() {
					$(this).parents('.lb').remove();
					js();
				})

				function js() {
					var num = 0;
					var conut = 0;
					var data = '',
						numbox
					numbox = $('.lb').length
					console.log(numbox)
					data = $('.xz').attr("data")

					$(".xz").each(function() {
						if($(this).attr("data") == 1) {
							var b = $(this).parents('.lb').find('.mid').find('.jgq ').find(".num").val();
							var jg = $(this).parents('.lb').find('.mid').find('.jgq ').find(".pri").text();
							conut += parseInt(b);
							num += b * jg;
						}
					})

					$('#zj').html(num);
					$('#zsl').html(conut);
				}
			})
		</script>
	</body>

</html>